import  React,{Component} from 'react'
import {Link} from 'react-router-dom'
import { Menu, Icon, Button } from 'antd';

import './index.less'
import logo from '../../assets/images/logo.png'
import menuList from '../../config/menuConfig'

const { SubMenu } = Menu;
export default class LeftNav extends Component{
    /*
    *  根据menu的数据生成对应的标签数组
    * */
    getMenuNodes=(menuList)=>{
       return menuList.map(item=>{
/*
           {
               title: '首页', // 菜单标题名称
                   key: '/home', // 对应的 path
               icon: 'home', // 图标名称
               children:[]
           }*/
        if (!item.children) {
            return (
                <Menu.Item key={item.key}>
                    <Link to={item.key}>
                        <Icon type={item.icon}/>
                        <span>{item.title}</span>
                    </Link>
                </Menu.Item>
                )
        }else {
        return(
            <SubMenu
            key={item.key}
            title={
                <span>
                    <Icon type={item.icon}/>
                    <span>{item.title}</span>
                </span>
            }
            >
                {this.getMenuNodes(item.children)}
            </SubMenu>
        )
        }
       })
    }
    render(){

        return (
            <div  className='left-nav'>
                <Link to='/home' className='left-nav-header'>
                    <img src={logo} alt='logo'/>
                     <h1>硅谷后台</h1>
                </Link>


                <Menu
                    defaultSelectedKeys={['1']}
                    defaultOpenKeys={['sub1']}
                    mode="inline"
                    theme="dark"
                >
                    {
                        this.getMenuNodes(menuList)
                    }
                </Menu>
            </div>
        )
    }

}